{% extends 'movie/base.html' %}
{% block content %}

<!DOCTYPE html>
<html>
<head>
  <title>电影数量折线图</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    canvas {
      width: 100%;
      max-width: 800px;
      height: auto;
    }
  </style>
</head>
<body>
  <h1 style="color: white;">电影数量折线图</h1>

    <div class="buttons">
    <button onclick="window.location.href='/movie/year-count'">电影数量变化趋势</button>
    <button onclick="window.location.href='/movie/wordcloud'">词云分析</button>
    <button onclick="window.location.href='/movie/movie-hot'">电影热度</button>
        <button onclick="window.location.href='/movie/map'">分布</button>
  </div>
  <canvas id="myChart"></canvas>

  <script>
    // 从 CSV 数据中提取年份和电影数量
    const csvData = `year,count
2015,204
2024,36
2016,206
2017,229
2018,179
2010,137
2019,194
2009,127
2023,129
2004,108
1995,50
2011,120
1993,50
2021,139
2014,170
1994,44
1997,51
2013,161
2022,108
1953,8
2001,81
2006,106
2020,109
2002,70
1999,67
2007,116
2008,121
2012,149
1934,5
2005,87
1998,56
2003,65
1992,44
1990,38
1936,4
1991,44
1996,45
1989,30
1952,5
1966,11
1985,15
1983,25
1958,11
1931,6
1961,14
1954,14
1969,13
1980,17
1986,28
1967,11
1975,6
1987,34
1988,27
2000,58
1977,7
1964,19
1955,12
1978,9
1982,24
1984,23
1939,5
1965,14
1960,19
1962,17
1979,14
1959,16
1940,6
1937,6
1942,4
1957,10
1974,7
1948,6
1946,5
1950,3
1925,3
1945,3
1976,7
1956,18
1963,15
1972,10
1971,11
1981,9
1968,10
1927,4
1902,1
1973,7
1970,14
1941,7
1951,8
1944,6
1938,3
1943,6
1935,7
1949,4
1928,3
1930,2
1916,1
1915,1
1933,3
1929,1
1922,1
1921,1
1926,1
1918,1`;

    const rows = csvData.trim().split('\n');
    const years = [];
    const counts = [];

    for (let i = 1; i < rows.length; i++) {
      const [year, count] = rows[i].split(',');
      years.push(parseInt(year));
      counts.push(parseInt(count));
    }

    // 创建折线图
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: years,
        datasets: [{
          label: '电影数量',
          data: counts,
          borderColor: 'rgb(54, 162, 235)',
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          tension: 0.1,
          color:'white'
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: '电影数量',
                color:'white'
            },
            ticks: {
            color: 'white' // 设置横坐标文字颜色为黑色
          }
          },
          x: {
            title: {
              display: true,
              text: '年份'
            },
            ticks: {
            color: 'white' // 设置横坐标文字颜色为黑色
          }
          }
        },
        plugins: {
          title: {
            display: true,
            text: '电影数量折线图',
              color:'white'
          }
        }
      }
    });
  </script>
</body>
</html>
{% endblock %}
